<template>
  <ele-table-select
    ref="select"
    :clearable="true"
    size="medium"
    :value="value"
    placeholder="请选择"
    value-key="id"
    label-key="telphone"
    prefix-icon="el-icon-search"
    :table-config="tableConfig"
    @select="updateValue"
    :popper-width="800"
  >
    <template v-slot:toolbar>
      <div style="max-width: 200px">
        <el-input
          clearable
          size="small"
          v-model="keywords"
          placeholder="输入关键字搜索"
          prefix-icon="el-icon-search"
          @blur="search"
        />
      </div>
    </template>
    <template v-slot:name="{ row }">
      <div v-if="row.info">
        <div class="ele-cell" v-if="row.info">

          <el-avatar v-if=" row.info && row.info.avatar" :src="row.info.avatar" shape="square" :size="40" />
          <div class="ele-cell-content">
            <div class="ele-cell-title">{{ row.name }}  <span>{{ row.telphone }}</span></div>
            <div class="ele-cell-desc text-blue" v-if="row.info && row.info.type == 1">{{ row.info.name }} {{ row.info.contact_phone }}</div>
            <div class="ele-cell-desc text-blue" v-if="row.info && row.info.type == 2">{{ row.info.contact_name }} {{ row.info.contact_phone }}</div>
          </div>
        </div>
        <div class="info-desc" v-if="arrayIncludesValue(row.check_type, '1')"> IP:{{ row.white_list }} </div>
        <div class="info-desc" v-if="arrayIncludesValue(row.check_type, '2')"> 域名:{{ row.domain }} </div>
        <div class="info-desc" v-if="row.info && row.info.type == 1"> 身份证号:{{ row.info.id_card_no }} </div>
        <div class="info-desc" v-if="row.info && row.info.type == 2"> 营业执照:{{ row.info.business_no }} </div>
      </div>

      <div v-else>
        <div class="ele-cell" >
          <div class="ele-cell-content">
            <div class="ele-cell-title">{{ row.name }} <span >{{ row.telphone }}</span></div>
            <div class="ele-cell-desc">{{ row.telphone }} </div>
          </div>
        </div>
        <div class="info-desc" v-if="arrayIncludesValue(row.check_type, '1')"> IP:{{ row.white_list }} </div>
        <div class="info-desc" v-if="arrayIncludesValue(row.check_type, '2')"> 域名:{{ row.domain }} </div>
      </div>

    </template>

    <template v-slot:type="{ row }">
      <div  v-if="row.package">
        <div>
          <span class="package-name"> {{row.package.name}}</span>
          <span class="package-money"> ¥{{row.package.money}}</span>
          <el-tag type="warning" effect="light" size="small" v-if="row.package.type==1" >{{row.package.day}} 天</el-tag>
        </div>

        <div  v-if="row.package.type==1"> 形象克隆  {{row.avatar_twin_used}} / {{row.is_infinite == 1 ? '无限' : row.avatar_twin_count}} （次）</div>
        <div  v-if="row.package.type==1"> 声音克隆  {{row.voice_twin_used}} / {{row.is_infinite == 1 ? '无限' : row.voice_twin_count}} （次）</div>
        <div  v-if="row.package.type==1"> 视频剪辑  {{row.video_clip_used}} / {{row.is_infinite == 1 ? '无限' : row.video_clip_count}} （秒）</div>
        <div  v-if="row.package.type==2">  {{row.package.point}} （点）</div>
      </div>
      <div v-else>
        <div> 形象克隆  {{row.avatar_twin_used}} / {{row.avatar_twin_count}} （次）</div>
        <div> 声音克隆  {{row.voice_twin_used}} / {{row.voice_twin_count}} （次）</div>
        <div> 视频剪辑  {{row.video_clip_used}} / {{row.video_clip_count}} （秒）</div>
      </div>
    </template>

    <template v-slot:info_type="{ row }">
      <el-tag v-if="row.info && row.info.type == 1" type="success" effect="light">个人资质</el-tag>
      <el-tag v-if="row.info && row.info.type == 2" type="primary" effect="light">企业资质</el-tag>
      <span v-if="!row.info">--</span>
    </template>

    <!-- 状态列 -->
    <template v-slot:is_freeze="{ row }">
      <el-switch
        :active-value="2"
        :inactive-value="1"
        v-model="row.is_freeze"
      />
    </template>

  </ele-table-select>
  
</template>

<script>
 import { list } from '@/api/account/list';
  export default {
    name: 'AccountTable',
    props: {
      // 修改回显的数据
      value: undefined
    },
    data() {
      return {
        keywords:'',
        // 搜索表单
        where: {
          is_status:2,
          keywords: ''
        },
        tableConfig: {
          datasource: ({ page, limit, where, order }) => {
            where.is_status = 2;
            where.keywords = this.keywords;
            return list({ ...where, ...order, page, limit });
          },
          columns: [
            {
              columnKey: 'index',
              type: 'index',
              width: 45,
              align: 'center'
            },
            {
              prop: 'name',
              label: '信息资料',
              showOverflowTooltip: true,
              minWidth: 180,
              slot: 'name'
            },
            {
              prop: 'balance',
              label: '点数',
              align: 'center',
              showOverflowTooltip: true,
              minWidth: 110,
              slot: 'balance'
            },
            {
              prop: 'type',
              label: '套餐种类',
              showOverflowTooltip: true,
              minWidth: 180,
              slot: 'type'
            },
            {
              prop: 'info_type',
              label: '申请类型',
              align: 'center',
              showOverflowTooltip: true,
              minWidth: 110,
              slot: 'info_type'
            },
          
            {
              prop: 'is_freeze',
              label: '冻结状态',
              align: 'center',
              showOverflowTooltip: true,
              minWidth: 110,
              slot: 'is_freeze'
            },
            {
              prop: 'maturity_time',
              label: '到期时间',
              align: 'center',
              showOverflowTooltip: true,
              minWidth: 110,
              slot: 'maturity_time'
            },
            {
              prop: 'remark',
              label: '备注',
              align: 'center',
              showOverflowTooltip: true,
              minWidth: 110,
            },
          ],
          pageSize:5,
          pageSizes:[5,10, 20, 30, 40, 50, 100],
          rowClickChecked: true,
          rowClickCheckedIntelligent: false,
          toolkit: ['reload', 'columns'],
          size: 'large',
          toolStyle: { padding: '0 10px' }
        }
      };
    },
    methods: {
      arrayIncludesValue(array, value) {
        return array.includes(value);
      },
      reload(){
        this.$refs.select.reload();
      },
      updateValue(data) {
        this.$emit('done', data);
      },
      // 搜索
      search(where) {
        where.is_status = 2;
        where.keywords = this.keywords;
        this.$refs.select.reload({
          where: where,
          page: 1
        });
      }
    }
  };
</script>

<style lang="less" scoped>
 .text-blue{
  color: #1890ff
 }
 .text-color{
  color: #000 ;
  font-size: 16px;
  width: 245px;
  display: inline-block;
 }
 .info-desc{
  color: #999999;
  font-size: 14px;
 }
 .package-name{
  color: #1367DE;
  font-size: 14px;
  margin-right: 5px;
 }
 .package-money{
  color:#FF0000;
  font-size: 18px;
  margin-right: 5px;
 }
 .drag {
    background: #000 !important;
    background-image: linear-gradient(#333, #999) !important;
  }

  .ele-cell-content {
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

</style>

